<template>
  <div class="app-container develop-structure-box">
    <div>
      <div class="top-box">
        <div class="box-l">
          <span class="pro-title">产品结构：</span>
          <span>{{ invMsg }}</span>
          <span
            class="op-btn"
            @click="btnAdd"
            v-if="invMsg !== '' && treeData == null"
            >新增</span
          >
          <span class="op-btn" v-if="invMsg !== ''" @click="btnRefresh"
            >刷新</span
          >
        </div>
        <div class="put-away">
          <el-button
            @click="handleDawer"
            type="primary"
            plain
            icon="el-icon-s-management"
            >物料</el-button
          >
          <el-select v-model="styleValue" @change="btnStyle">
            <el-option label="曲线树图" value="0"></el-option>
            <el-option label="折线树图" value="1"></el-option>
          </el-select>
          <el-button
            type="info"
            @click="btnScreen"
            plain
            icon="el-icon-camera-solid"
            >截图</el-button
          >
        </div>
      </div>
      <div>
        <ProductTree
          :downLoadName="screenName"
          :treeData="treeData"
          :changeValue="styleValue"
          :fmConfig="fmConfig"
          :key="key"
          ref="productTree"
        />
      </div>
    </div>
    <!-- 物料抽屉 -->
    <el-drawer
      :title="drawerTitle"
      :visible.sync="drawer"
      :direction="direction"
      size="680px"
      class="de-drawer-detail"
    >
      <div class="drawer-detail-table">
        <el-form
          :inline="true"
          style="margin-bottom: 10px; display: flex; align-items: center"
        >
          <el-form-item>
            <el-input
              v-model="queryParams.code"
              clearable
              size="small"
              placeholder="物料编码"
              style="width: 140px"
            />
          </el-form-item>
          <el-form-item>
            <el-input
              v-model="queryParams.name"
              clearable
              size="small"
              placeholder="物料名称"
              style="width: 140px"
            />
          </el-form-item>
          <el-select
            class="picker-data"
            style="margin-right: 15px"
            placeholder="物料分类"
            clearable
            v-model="queryParams.sortId"
          >
            <el-option
              v-for="dict in optionsInvSort"
              :key="dict.sortId"
              :label="dict.sortName"
              :value="dict.sortId"
            />
          </el-select>
          <el-form-item class="check-box">
            <el-button type="primary" icon="el-icon-search" @click="search"
              >搜索
            </el-button>
            <el-button
              type="primary"
              plain
              icon="el-icon-menu"
              @click="checkleAll"
              >查询所有</el-button
            >
          </el-form-item>
        </el-form>
        <el-table
          ref="tableDetailHeight"
          :data="drawerTableData"
          border
          style="width: 100%"
          v-loading="drawerTableLoading"
          @row-click="geMaterialTree"
          :height="drawerTableMaxHeight"
        >
          <el-table-column type="index" width="50" align="center" label="序号">
          </el-table-column>
          <el-table-column
            label="物料编码"
            align="center"
            prop="code"
            width="110"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.code }}</span>
            </template>
          </el-table-column>
          <el-table-column label="物料名称" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.name }} {{ scope.row.attribute }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="主计量"
            align="center"
            prop="unit_name"
            width="60"
          />
          <el-table-column
            label="供应"
            align="center"
            prop="supplyTypeCn"
            width="60"
          />
        </el-table>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import {
  listMaterial,
  dictMatching,
  materialTree,
  billParameters,
  invSort,
} from "../../api/structure";
import { Translate } from "../../utils/develop";
import ProductTree from "../../components/Structure/productTree.vue";
export default {
  name: "Structure",
  data() {
    return {
      // 单据参数
      fmConfig: {
        bomType: "",
        bomConfig: "",
      },
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 100,
        code: "",
        name: "",
       sortId: "",
      },
      //物料分类
      optionsInvSort: [],
      //供应方式
      optionsSupplyType: [],
      //结构树
      treeData: null,
      //显示结构组件
      treeStatus: false,
      //刷新组件
      key: "",
      //物料抽屉
      drawerTableLoading: true,
      drawerTableMaxHeight: null,
      drawerTitle: "",
      drawer: false,
      direction: "rtl",
      drawerTableData: [],
      // 点击抽屉物料信息
      invMsg: "",
      //新增物料编码
      invCode: "",
      //样式选择
      styleValue: "0",
      //截图名称
      screenName: "结构图",
    };
  },
  activated() {
    const refresh = this.$store.getters["developStatus/getStructureRefresh"];
    if (refresh == true) {
      this.commomTree(this.invCode);
      this.$store.dispatch("developStatus/setStructureRefresh", false);
    }
  },
  created() {
    //单据参数
    this.getParameters();
    //物料分类
    this.getInvSort();
    //初始化物料数据
    this.getSupplyType().then(() => {
      this.getMaterialList();
    });
  },

  methods: {
    // 获取物料数据
    getMaterialList() {
      this.drawerTableLoading = true;
      listMaterial(this.queryParams).then((res) => {
        if (res.code == 200) {
          if (res.rows.length > 0) {
            Translate(
              res.rows,
              this.optionsSupplyType,
              "supply_type",
              "supplyTypeCn"
            ).then((data) => {
              this.drawerTableData = data;
            });
          } else {
            this.drawerTableData = [];
          }
          this.drawerTableMaxHeight =
            `${document.documentElement.clientHeight}` - 210;
          this.drawerTableLoading = false;
        }
      });
    },

    // 获取物料分类
    getInvSort() {
      invSort().then((res) => {
        if (res.code == 200) {
          this.optionsInvSort = res.data;
        }
      });
    },

    // 获取供应方式
    getSupplyType() {
      return new Promise((resove) => {
        dictMatching("inv_supply_type").then((res) => {
          if (res.code == 200) {
            this.optionsSupplyType = res.data;
          }
        });
        resove();
      });
    },

    //获取单据参数
    getParameters() {
      return new Promise((resolve, reject) => {
        billParameters({
          formPath: this.$route.query.fmConfig,
        }).then((res) => {
          if (res.code == 200) {
            this.fmConfig.bomConfig = res.data["bom.config"];
            this.fmConfig.bomType = res.data["bom.type"];
            resolve();
          }
        });
      });
    },

    //新增
    btnAdd() {
      this.$router.push({
        path: "/rd/develop/ebomadd",
        query: {
          open: "addStatus",
          workType: this.fmConfig.bomType,
          fmConfig: this.fmConfig.bomConfig,
          fmReferer: "platform",
          timeStamp: new Date().getTime(),
        },
      });
    },

    //手动刷新
    btnRefresh() {
      this.commomTree(this.invCode);
    },

    //抽屉查询结构树
    geMaterialTree(row) {
      this.screenName = row.name + "-" + "结构图";
      this.invCode = row.code;
      this.commomTree(row.code).then((data) => {
        if (data == null) {
          this.$store.dispatch("developStatus/setInitInv", row);
        } else {
          this.$store.dispatch("developStatus/setInitInv", null);
        }
        this.invMsg =
          row.code +
          " " +
          row.name +
          " " +
          row.attribute +
          " " +
          row.unit_name +
          " " +
          row.supplyTypeCn;
      });
    },

    //物料树公共请求
    commomTree(code) {
      return new Promise((resove) => {
        materialTree({ invCode: code }).then((res) => {
          if (res.code == 200) {
            if (res.data !== undefined) {
              this.treeData = res.data;
              this.curTree(this.treeData.children);
            } else {
              this.msgError("当前物料没有BOM信息");
              this.treeData = null;
            }
            this.key = new Date().getTime();
            resove(this.treeData);
          }
        });
      });
    },

    //递归全部展开
    curTree(data) {
      data.forEach((item, i) => {
        item.collapsed = false;
        if (item.children !== null && item.children.length > 0) {
          this.curTree(item.children);
        }
      });
    },

    //物料抽屉
    handleDawer() {
      this.drawer = true;
    },

    //搜索物料
    search() {

      this.getMaterialList();
    },

    // 查询所有
    checkleAll() {
      this.queryParams.code = "";
      this.queryParams.name = "";
       this.queryParams.sortId = "";
      this.queryParams.pageNum = 1;
      this.queryParams.pageSize = 100;
      this.getMaterialList();
    },

    //截图
    btnScreen() {
      this.$refs.productTree.btnScreen();
    },

    //样式选择
    btnStyle(value) {
      this.$refs.productTree.btnStyle(value);
    },
  },

  components: {
    ProductTree,
  },
};
</script>
<style lang="scss">
.develop-structure-box {
  position: relative;
  .picker-data {
    min-width: 120px !important;
    width: 120px;
    height: 32px;
    line-height: 32px;
    margin-bottom: 5px;
  }
  .el-form-item__content{
    line-height: 32px;
  }
  .top-box {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    justify-content: space-between;
    .box-l {
      .pro-title {
        color: #1890ff;
      }
      .op-btn {
        color: #1890ff;
        margin-left: 15px;
        cursor: pointer;
        &:hover {
          opacity: 0.8;
        }
      }
    }
    .put-away {
      .el-select {
        width: 120px;
        margin-left: 10px;
        margin-right: 10px;
      }
    }
  }
  .el-drawer__wrapper {
    width: 710px;
    left: inherit;
  }
  .de-drawer-detail {
    .el-drawer.rtl {
      height: calc(100vh - 85px);
      top: auto;
    }
    .drawer-detail-table {
      padding: 0 15px;
    }
    .el-button--medium {
      padding: 8px 10px;
      span {
        font-size: 13px;
      }
    }
    .el-drawer__header {
      margin-bottom: 0;
    }
  }
}
.v-modal {
  display: none;
}

:focus {
  outline: 0;
}
</style>
